{% extends 'home.html' %}
{% block content-title %}
    <title>Login</title>
{% endblock %}
{% block content-main %}
    <style>
        .h34 {
            height: 34px;
            text-align: center;
            vertical-align: middle;
        }
    </style>
    {% load static %}
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">登录界面</h3>
                </div>
                <div class="panel-body">
                    <form action="" class="form-horizontal" id="login_form">
                        {% csrf_token %}
                        {% for form in login_form %}
                            <div class="form-group">
                                <div class="col-sm-3 h34" style="vertical-align: middle">
                                    <label for="{{ form.auto_id }}">{{ form.label }}</label>
                                </div>
                                <div class="col-sm-8 h34">{{ form }}
                                    <span id="{{ form.auto_id }}" class="pull-right" style="color: red"></span>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="form-group">
                            <div class="col-sm-3 h34"><label for="id_captcha">验证码</label></div>
                            <div class="col-sm-4 h34"><input type="text" id="id_captcha" class="form-control"
                                                             name="captcha"></div>
                            <div class="col-sm-4 h34"><img src="{% url 'user:verify_code' %}" alt="图片验证码"
                                                           id="captcha_img"></div>
                        </div>
                        <div class="text-center">
                            <button class="btn btn-success" id="btn_login" type="button">登录</button>
                            <button class="btn btn-warning" id="btn_reset" type="reset">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(
            {#ajax提交数据#}
            $('#btn_login').click(function () {
                {#new 一个对象#}
                let formData = new FormData;
                {#遍历取到form表单中的值#}
                $.each($('#login_form').serializeArray(), function (index, data_obj) {
                    {#遍历的结果是(索引,数据对象)#}
                    formData.append(data_obj.name, data_obj.value)
                });
                {#提交表单#}
                $.ajax({
                    url: '',
                    type: 'post',
                    data: formData,
                    {#提交文件数据将下列两个参数设为false#}
                    processData: false,
                    contentType: false,
                    {#回调函数，拿到后端return的JsonResponse#}
                    success: function (response) {
                        {#JsonResponse中有状态码 只要不是200都是错误#}
                        if (response.code === 200) {
                            Swal.fire({
                                title: response.msg,
                                showCancelButton: true,
                                confirmButtonText: "确认",
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload()
                                }
                            })
                        } else {
                            {#错误情况时渲染错误信息#}
                            {#console.log(response.errors)  格式【{ k:[v] }】#}
                            $.each(response.errors, function (key, value) {
                                let inputId = '#id_' + key;
                                $(inputId).next().text(value[0]).parent().addClass('has-error');
                            })
                        }
                    }
                })
            }),
            $('input').focus(function () {
                $(this).next().text('').parent().removeClass('has-error')
            }),
            $('#captcha_img').click(function () {
                let timestamp = Date.now();
                let old_src = this.src;
                if (old_src.indexOf('?') > -1) {
                    this.src = old_src.split('?t=')[0] + '?t=' + timestamp
                } else {
                    this.src = old_src + '?t=' + timestamp
                }
            })
        )
    </script>
{% endblock %}